<template>
  <div class="achievement">
    <div class="achievement-header clearfix">
      <ul class="item fl">
        <li
          v-for="(item, index) in items"
          :key="index"
          @click="selectItem(item.type,index,item.year)"
        >
          <span :class="[current == index ? 'cur' : '']">{{item.name}}</span>
        </li>
      </ul>
      <ul class="date fr" @click="showData">
        <li class="date_time" :class="info=='按条件查找'?'':'active'">
          <span>{{info}}</span>
          <i class="icon-right"></i>
          <!-- <svg-icon icon-class="icon_right" class="date-hide"></svg-icon> -->
        </li>
      </ul>
    </div>
    <div class="achievement-content">
      <h2
        v-show="current == 3"
        style="text-align: center;color: #666;font-size: 15px; line-height: 40px;"
      >截止到昨天</h2>
      <ul class="lists">
        <li @click="Jump('dlsGljDetail',{current:current,year:currentYear,month:currentMonth})" class="list">
          <span class="fl">团队管理总业绩(元)</span>
          <span class="fr">
            {{commission||'0.00'}}
            <!-- <br />
            <i>(已过滤虚拟库存出库订单)</i> -->
          </span>
        </li>
        <li @click="Jump('dlsGljDetail',{current:current,year:currentYear,month:currentMonth})" class="list">
          <span class="fl">平推团队数量(个)</span>
          <span class="fr">{{lower_level_user_num||0}}</span>
        </li>
        <li class="list">
          <span class="fl">当月奖励(元)</span>
          <span class="fr">{{reward||'0.00'}}</span>
        </li>
        <li class="list" v-if="group_link">
          当前参与统计业绩的商品（
          <i @click="linkTo(group_link)">点击查看</i>）
        </li>
      </ul>
    </div>
    <!-- <van-popup v-model="show_date"></van-popup> -->
    <date-pop @cancel="cancelTime" @confirm="selectTime" v-if="show_date" :timeData="timeData"></date-pop>
  </div>
</template>

<script>
import Vue from 'vue'
import 'vant/lib/index.css'
import { Popup } from 'vant'
import datePop from '@/views/user/components/datePop'
import { getDlsGlj } from '@/api/user/dls/dlsApi'
import { openPage } from '@/utils/utils'
Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      current: 3,
      show_date: false,
      currentYear: '',
      currentMonth: '',
      group_link: null,
      commission: null,
      lower_level_user_num: '',
      reward: '',
      items: [],
      timeData: {},
      info: '按条件查找',
      personal_consume: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getTime()
      this.getDlsGlj()
    },
    selectItem(type, index, year) {
      this.current = index
      this.currentYear = year
      this.currentMonth = type
      this.getDlsGlj()
    },
    selectTime(e) {
      this.currentYear = e.selectYear
      this.currentMonth = e.selectMonth
      this.current = -1
      this.getDlsGlj()
      this.info = this.currentYear + '年' + this.currentMonth + '月'
      this.show_date = false
    },
    cancelTime() {
      // console.log('取消')
      this.show_date = false
    },
    showData() {
      this.show_date = true
    },
    // 路由跳转
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    // 链接跳转
    linkTo(url) {
      openPage(url)
    },

    // 数据请求
    getDlsGlj() {
      const data = {
        year: this.currentYear,
        month: this.currentMonth
      }
      this.$loadingWrap.show()
      getDlsGlj(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.timeData.year = res.data.year_list
          this.timeData.month = res.data.month_list
          this.timeData.currentYear = res.data.year
          this.timeData.currentMonth = res.data.month

          this.commission = res.data.detail.all_amount
          this.lower_level_user_num = res.data.detail.lower_level_user_num
          this.reward = res.data.detail.reward
          this.group_link = res.data.group_link
          this.personal_consume = res.data.personal_consume
        } else {
          this.$Error(res.msg)
        }
      })
    },

    // 获取当前月份和前三个月份
    getTime() {
      const time = new Date()
      const currentMonth = time.getMonth() + 1
      const currentYear = time.getFullYear()
      const item = [{ name: '本月', type: currentMonth, year: currentYear }]
      for (let i = 1; i <= 3; i++) {
        const month =
          currentMonth - i > 0 ? currentMonth - i : currentMonth - i + 12
        const year = currentMonth - i > 0 ? currentYear : currentYear - 1

        item.unshift({ name: month + '月', type: month, year: year })
      }
      // 当前年月
      this.currentYear = currentYear
      this.currentMonth = currentMonth
      this.items = item
    }
  },
  components: {
    datePop
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/mixin";
@import "src/styles/user/yejiStyle/index";
.miniprogram-root {
  .date i{
    &.icon-right {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      margin-left: 10px;
      vertical-align: 5px;
    }
  }
}
</style>
